<template>
  <div id="App">
    <div class="resetPw_container">
      <!--<img src="../assets/logo1.png" alt="">-->
      <div class="resetPw_box">
        <!-- <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div> -->
        <span class="title">重置密码</span>
        <el-form ref="resetPwFormRef" :model="resetPwForm" :rules="resetPwFormRules" label-width="0px"
          class="resetPw_form">
          <!--新密码-->
          <el-form-item label="" prop="password">
            <el-input v-model="resetPwForm.password" type="password" placeholder="输入新密码" prefix-icon="">
            </el-input>
          </el-form-item>
          <!--新密码确认-->
          <el-form-item label="" prop="repassword">
            <el-input v-model="resetPwForm.repassword" type="password" placeholder="再次输入新密码" prefix-icon="">
            </el-input>
          </el-form-item>
          <!-- <el-button type="text" style="display:flex;">忘记密码？</el-button> -->
          <el-form-item class="btn1">
            <el-button type="primary" @click="jumpBack">上一步</el-button>
            <el-button type="primary" @click="relogin">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 登录表单的数据绑定对象
      resetPwForm: {
        password: '',
        repassword: ''
      },
      // 登录表单的验证规则对象
      resetPwFormRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // { min: 6, max: 18, message: '长度非法！', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          // { min: 6, max: 18, message: '长度非法！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    jumpBack() {
      this.$refs.resetPwFormRef.resetFields()
      this.$router.push('/ForgetPw')
    },
    relogin() {
      if (this.resetPwForm.password === '' || this.resetPwForm.repassword === '') {
        this.$msgbox.alert('密码不能为空！')
      } else {
        // 验证两次密码是否输入一致
        if (this.resetPwForm.password !== this.resetPwForm.repassword) {
          this.$refs.resetPwFormRef.resetFields()
          this.$msgbox.alert('两次密码不一致！')
          // location.reload();
          // this.$router.go(0);
        } else {
          this.$msgbox.alert('重置成功，请返回登录!')
          this.$refs.resetPwFormRef.resetFields()
          this.$router.push('/Login')
        }
      }

    }
  }
}

</script>

<style scoped>
.resetPw_container {
  height: 100%;
  background-color: #eee;
}

.resetPw_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}

.title {
  color: #409EFF;
  display: flex;
  margin-top: 30px;
  margin-left: 20px;
  font-size: 24px;
}

.resetPw_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  /* margin-top: 20px; */
}

.btn1 {
  display: flex;
  justify-content: center;
}
</style>
